<script setup lang="ts">
import { onMounted, ref } from 'vue';
import ProjectHeader from './DachuangProjectDetailsHeader.vue';
import ProjectIntroduction from './DachuangProjectDetailsIntroduction.vue'
import ProjectTeam from './DachuangProjectDetailsTeam.vue'
import type { ProjectDetails } from '../types/ProjectDetails';
import type { ProjectIntroProps } from '../types/ProjectIntroProps';
import { getProjectDetailsIntroduceApi, getProjectDetailsMetaApi, getProjectDetailsmembersApi } from '@/api/innovationSquare/projectApi';
import type { ProjectHeaderProps } from '../types/ProjectHeadersProp';
import type { ProjectTeamProps } from '../types/ProjectTeamProps'
import { useRoute } from 'vue-router';
import router from '@/router'

const route = useRoute()
const projectId = String(route.params.projectId);

const liked = ref(false);
const collected = ref(false);
const activeKey = ref('1');
const loading = ref(false);
const projectMeta = ref<ProjectDetails>();
const headerProp = ref<ProjectHeaderProps>({
  name: '',
  tags: [],
  advertise: '',
  company: '',
  introductors: '',
  liked: liked.value,
  collected: collected.value,
  projectStyle: '',
  exhibitionCode: '',
});
const introProp = ref<ProjectIntroProps>({
  introduction: '',
  innovation: '',
  projectImages: '',
  directionField: '',
  directionTechnical: '',
  resources: '',
  submissionMaterials: '',
  evaluationMethod: '',
  supportMatching: '',
  supportPolicy: '',
  iconicResults: '',
  challenge: '',
  undergraduatesAchievement: '',
});
const teamMembers = ref<ProjectTeamProps>({
  teachers: [],
  members: [],
});

const fetchProject = async () => {
  loading.value = true;

  if (!projectId) {
    console.error('No projectId found:', projectId);
    return;
  }
  try {
    // 头数据
    const detailsResponse = await getProjectDetailsMetaApi(projectId)
    projectMeta.value = detailsResponse.data;
    headerProp.value.name = detailsResponse.data.name;
    headerProp.value.advertise = detailsResponse.data.advertise;
    headerProp.value.tags = detailsResponse.data.tags;
    headerProp.value.company = detailsResponse.data.company;
    headerProp.value.introductors = detailsResponse.data.introductors;
    headerProp.value.liked = liked.value;
    headerProp.value.collected = collected.value;
    headerProp.value.projectStyle = detailsResponse.data.projectStyle;
    headerProp.value.exhibitionCode = detailsResponse.data.exhibitionCode;

    // 介绍
    const introResponse = await getProjectDetailsIntroduceApi(projectId)
    introProp.value = introResponse.data;

    // 团队
    const teamResponse = await getProjectDetailsmembersApi(projectId)

    if (teamResponse) {
      teamMembers.value.teachers = teamResponse
        .filter((member: any) => member.userType === '指导老师')
        .map(({ userName, userCollege }: { userName: string; userCollege: string }) => ({
          userName,
          userType: '指导老师',
          userCollege,
        }));

      teamMembers.value.members = teamResponse
        .filter((member: any) => member.userType === '项目成员')
        .map(({ userName, userGrade, userCollege }: { userName: string; userGrade: string; userCollege: string }) => ({
          userName,
          userType: '项目成员',
          userGrade,
          userCollege,
        }));
    }
  }
  catch (error) {
    console.error('Error fetching project data:', error);
  }
  finally {
    loading.value = false
  }
}

// fetchProject();

onMounted(() => {
  fetchProject();
});

const titleParts = '双创广场 > 项目展示 > 详情'.split(' > ');
const handleBreadcrumbClick = (part: string) => {
  if (part === '项目展示' || part === '双创广场')
    router.push('/user/dachuang');
}
</script>

<template>
  <div style="margin-left: 0rem; margin-right: 0rem;">
    <a-spin :spinning="loading" size="large" />

    <div style="margin-left: 1rem; margin-right: 1rem;">
      <a-Layout>
        <div style="overflow-y: auto; overflow-x: hidden; max-height: 85vh;">
          <nav>
            <ProjectHeader
              :header="headerProp"
            />
            <a-card>
              <a-tabs v-model="activeKey" class="custom-new-TabBar" :tab-bar-style="{ textAligklin: 'center' }">
                <a-tab-pane key="1" tab="项目简介">
                  <ProjectIntroduction
                    :intro="introProp"
                  />
                </a-tab-pane>
                <a-tab-pane v-if="String(projectMeta?.projectStyle) === '1' || String(projectMeta?.projectStyle) === '4'" key="2" tab="项目团队">
                  <ProjectTeam
                    :card="teamMembers"
                  />
                </a-tab-pane>
              </a-tabs>
            </a-card>
          </nav>
        </div>
      </a-Layout>
    </div>
  </div>
</template>

<style lang="scss">
.data-market {
  display: flex;
  flex-direction: column;
  .top-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
